<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="content" />
      <button @click="del">销毁vue实例</button>
    </div>
    <script>
      // 生命周期钩子就是vue实例在某个时间点会自动执行的函数
      // 1.vue实例在初始化阶段会先后执行beforeCreate与created
      // 2.选择元素，如果vue没有设置el则直接使用template，vue使用了el判断有没有template，有template直接选择template，没有template选择el对应的元素
      // 3.页面元素渲染之前会执行beforeMount
      // 4.页面元素渲染之后会执行mounted
      // 5.当vue实例调用 $destroyed()销毁方法的时候会执行beforeDestroy
      // 6.vue实例完全销毁之后执行destroyed
      // 7.当数据发生改变，还没有重新渲染之前执行beforeUpdate
      // 8.数据发生改变，渲染之后执行updated
      var vm = new Vue({
        el: '#app',
        //template: '<div>wwww</div>',
        data() {
          return {
            content: 'wxxx'
          };
        },
        methods: {
          del() {
            this.$destroy(true);
          }
        },
        beforeCreate() {
          console.log('beforeCreate');
        },
        created() {
          console.log('created');
        },
        beforeMount() {
          console.log(this.$el);
          console.log('beforeMount');
        },
        mounted() {
          console.log(this.$el);
          console.log('mounted');
        },
        beforeDestroy() {
          console.log('beforeDestroy');
        },
        destroyed() {
          console.log('destroyed');
        },
        beforeUpdate() {
          console.log(this.$el);
          console.log('beforeUpdate');
        },
        updated() {
          console.log(this.$el);
          console.log('updated');
        }
      });
    </script>
  </body>
</html>
